<template>
  <div class="form">
    <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="170px">

      <div v-for="item in formData.procureditem">
        <el-form-item style="width:460px">
          <div class="addlist"> <span>address{{ item.index }}</span>
            <el-button @click="removeItem(item)" v-permission="['customeraddres.destroy']" size="mini" plain type="danger">Delete</el-button>
          </div>
        </el-form-item>
        <el-form-item label="Title" style="width:460px">
          <el-input v-model="item.title" autocomplete="off" placeholder="Enter Title name" />
        </el-form-item>
        <el-form-item label="Attention" style="width:460px">
          <el-input v-model="item.attention" placeholder="Enter Attention name"></el-input>
        </el-form-item>
        <el-form-item label="Tel" style="width:460px">
          <el-input v-model="item.tel" placeholder="Enter Tel Number"></el-input>
        </el-form-item>
        <el-form-item label="Address" style="width:460px">
          <el-input v-model="item.address" placeholder="Enter Address"></el-input>
        </el-form-item>
        <el-form-item label="Country" prop="Country" style="width: 460px;">
          <el-select v-model="item.countries" filterable placeholder="Choose country" style="width:290px">
            <el-option v-for="item in countries" :key="item.id" :label="item.name" :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Fax" style="width:460px">
          <el-input v-model="item.fax" placeholder=""></el-input>
        </el-form-item>
      </div>


    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="addItem()" v-permission="['customeraddres.store']" size="mini" style="margin-left: 170px;">+Add</el-button>
      <el-button type="primary" size="mini" @click="save('ruleForm')" style="margin-left: 30px;">Submit</el-button>
    </div>
  </div>
</template>
<script>
  import CURD from "@/mixin/CURD";
  import {
    destroy,
    index as addrelist,
    store as addrestore
  } from "@/api/customeraddre";
  export default {
    name: "addressIndex",
    props: {
      id: {
        type: String,
        default: 0
      }
    },
    components: {

    },
    mixins: [CURD],
    data() {
      return {
        cid: this.id,
        isEdit: false,
        isNew: false,
        activeName: 'first',
        countries: [{
            id: '1',
            name: 'Singapore',
            name_zh: '新加坡'
          },
          {
            id: '2',
            name: 'Afghanistan',
            name_zh: '阿富汗'
          },
          {
            id: '3',
            name: 'Albania',
            name_zh: '阿尔巴尼亚'
          },
          {
            id: '4',
            name: 'Algeria',
            name_zh: '阿尔及利亚'
          },
          {
            id: '5',
            name: 'American Samoa',
            name_zh: '美属萨摩亚'
          },
          {
            id: '6',
            name: 'Andorra',
            name_zh: '安道尔'
          },
          {
            id: '7',
            name: 'Angola',
            name_zh: '安哥拉'
          },
          {
            id: '8',
            name: 'Anguilla',
            name_zh: '安圭拉'
          },
          {
            id: '9',
            name: 'Antigua and Barbuda',
            name_zh: '安提瓜和巴布达'
          },
          {
            id: '10',
            name: 'Argentina',
            name_zh: '阿根廷'
          },
          {
            id: '11',
            name: 'Armenia',
            name_zh: '亚美尼亚'
          },
          {
            id: '12',
            name: 'Aruba',
            name_zh: '阿鲁巴'
          },
          {
            id: '13',
            name: 'Australia',
            name_zh: '澳大利亚'
          },
          {
            id: '14',
            name: 'Austria',
            name_zh: '奥地利'
          },
          {
            id: '15',
            name: 'Azerbaijan',
            name_zh: '阿塞拜疆'
          },
          {
            id: '16',
            name: 'Bahamas',
            name_zh: '巴哈马'
          },
          {
            id: '17',
            name: 'Bahrain',
            name_zh: '巴林'
          },
          {
            id: '18',
            name: 'Bangladesh',
            name_zh: '孟加拉国'
          },
          {
            id: '19',
            name: 'Barbados',
            name_zh: '巴巴多斯'
          },
          {
            id: '20',
            name: 'Belarus',
            name_zh: '白俄罗斯'
          },
          {
            id: '21',
            name: 'Belgium',
            name_zh: '比利时'
          },
          {
            id: '22',
            name: 'Belize',
            name_zh: '伯利兹'
          },
          {
            id: '23',
            name: 'Benin',
            name_zh: '贝宁'
          },
          {
            id: '24',
            name: 'Bermuda',
            name_zh: '百慕大'
          },
          {
            id: '25',
            name: 'Bhutan',
            name_zh: '不丹'
          },
          {
            id: '26',
            name: 'Bolivia',
            name_zh: '玻利维亚'
          },
          {
            id: '27',
            name: 'Bosnia and Herzegovina',
            name_zh: '波斯尼亚和黑塞哥维那'
          },
          {
            id: '28',
            name: 'Botswana',
            name_zh: '博茨瓦纳'
          },
          {
            id: '29',
            name: 'Brazil',
            name_zh: '巴西'
          },
          {
            id: '30',
            name: 'Brunei',
            name_zh: '文莱'
          },
          {
            id: '31',
            name: 'Bulgaria',
            name_zh: '保加利亚'
          },
          {
            id: '32',
            name: 'Burkina Faso',
            name_zh: '布基纳法索'
          },
          {
            id: '33',
            name: 'Burundi',
            name_zh: '布隆迪'
          },
          {
            id: '34',
            name: 'Cambodia',
            name_zh: '柬埔寨'
          },
          {
            id: '35',
            name: 'Cameroon',
            name_zh: '喀麦隆'
          },
          {
            id: '36',
            name: 'Canada',
            name_zh: '加拿大'
          },
          {
            id: '37',
            name: 'Cape Verde',
            name_zh: '佛得角'
          },
          {
            id: '38',
            name: 'Cayman Islands',
            name_zh: '开曼群岛'
          },
          {
            id: '39',
            name: 'Central African Republic',
            name_zh: '中非共和国'
          },
          {
            id: '40',
            name: 'Chad',
            name_zh: '乍得'
          },
          {
            id: '41',
            name: 'Chile',
            name_zh: '智利'
          },
          {
            id: '42',
            name: 'China',
            name_zh: '中国'
          },
          {
            id: '43',
            name: 'Colombia',
            name_zh: '哥伦比亚'
          },
          {
            id: '44',
            name: 'Comoros',
            name_zh: '科摩罗'
          },
          {
            id: '45',
            name: 'Congo',
            name_zh: '刚果（布）'
          },
          {
            id: '46',
            name: 'Congo, the Democratic Republic of the',
            name_zh: '刚果（金）'
          },
          {
            id: '47',
            name: 'Cook Islands',
            name_zh: '库克群岛'
          },
          {
            id: '48',
            name: 'Costa Rica',
            name_zh: '哥斯达黎加'
          },
          {
            id: '49',
            name: "Côte d'Ivoire",
            name_zh: '科特迪瓦'
          },
          {
            id: '50',
            name: 'Croatia',
            name_zh: '克罗地亚'
          },
          {
            id: '51',
            name: 'Cuba',
            name_zh: '古巴'
          },
          {
            id: '52',
            name: 'Cyprus',
            name_zh: '塞浦路斯'
          },
          {
            id: '53',
            name: 'Czech Republic',
            name_zh: '捷克共和国'
          },
          {
            id: '54',
            name: 'Denmark',
            name_zh: '丹麦'
          },
          {
            id: '55',
            name: 'Djibouti',
            name_zh: '吉布提'
          },
          {
            id: '56',
            name: 'Dominica',
            name_zh: '多米尼克'
          },
          {
            id: '57',
            name: 'Dominican Republic',
            name_zh: '多米尼加'
          },
          {
            id: '58',
            name: 'Ecuador',
            name_zh: '厄瓜多尔'
          },
          {
            id: '59',
            name: 'Egypt',
            name_zh: '埃及'
          },
          {
            id: '60',
            name: 'El Salvador',
            name_zh: '萨尔瓦多'
          },
          {
            id: '61',
            name: 'Equatorial Guinea',
            name_zh: '赤道几内亚'
          },
          {
            id: '62',
            name: 'Eritrea',
            name_zh: '厄立特里亚'
          },
          {
            id: '63',
            name: 'Estonia',
            name_zh: '爱沙尼亚'
          },
          {
            id: '64',
            name: 'Ethiopia',
            name_zh: '埃塞俄比亚'
          },
          {
            id: '65',
            name: 'Falkland Islands (Malvinas)',
            name_zh: '福克兰群岛（马尔维纳斯）'
          },
          {
            id: '66',
            name: 'Faroe Islands',
            name_zh: '法罗群岛'
          },
          {
            id: '67',
            name: 'Fiji',
            name_zh: '斐济'
          },
          {
            id: '68',
            name: 'Finland',
            name_zh: '芬兰'
          },
          {
            id: '69',
            name: 'France',
            name_zh: '法国'
          },
          {
            id: '70',
            name: 'French Guiana',
            name_zh: '法属圭亚那'
          },
          {
            id: '71',
            name: 'French Polynesia',
            name_zh: '法属波利尼西亚'
          },
          {
            id: '72',
            name: 'Gabon',
            name_zh: '加蓬'
          },
          {
            id: '73',
            name: 'Gambia',
            name_zh: '冈比亚'
          },
          {
            id: '74',
            name: 'Georgia',
            name_zh: '格鲁吉亚'
          },
          {
            id: '75',
            name: 'Germany',
            name_zh: '德国'
          },
          {
            id: '76',
            name: 'Ghana',
            name_zh: '加纳'
          },
          {
            id: '77',
            name: 'Gibraltar',
            name_zh: '直布罗陀'
          },
          {
            id: '78',
            name: 'Greece',
            name_zh: '希腊'
          },
          {
            id: '79',
            name: 'Greenland',
            name_zh: '格陵兰'
          },
          {
            id: '80',
            name: 'Grenada',
            name_zh: '格林纳达'
          },
          {
            id: '81',
            name: 'Guadeloupe',
            name_zh: '瓜德罗普'
          },
          {
            id: '82',
            name: 'Guam',
            name_zh: '关岛'
          },
          {
            id: '83',
            name: 'Guatemala',
            name_zh: '危地马拉'
          },
          {
            id: '84',
            name: 'Guinea',
            name_zh: '几内亚'
          },
          {
            id: '85',
            name: 'Guinea-Bissau',
            name_zh: '几内亚比绍'
          },
          {
            id: '86',
            name: 'Guyana',
            name_zh: '圭亚那'
          },
          {
            id: '87',
            name: 'Haiti',
            name_zh: '海地'
          },
          {
            id: '88',
            name: 'Holy See (Vatican City State)',
            name_zh: '梵蒂冈'
          },
          {
            id: '89',
            name: 'Honduras',
            name_zh: '洪都拉斯'
          },
          {
            id: '90',
            name: 'Hong Kong',
            name_zh: '香港'
          },
          {
            id: '91',
            name: 'Hungary',
            name_zh: '匈牙利'
          },
          {
            id: '92',
            name: 'Iceland',
            name_zh: '冰岛'
          },
          {
            id: '93',
            name: 'India',
            name_zh: '印度'
          },
          {
            id: '94',
            name: 'Indonesia',
            name_zh: '印度尼西亚'
          },
          {
            id: '95',
            name: 'Iran, Islamic Republic of',
            name_zh: '伊朗'
          },
          {
            id: '96',
            name: 'Iraq',
            name_zh: '伊拉克'
          },
          {
            id: '97',
            name: 'Ireland',
            name_zh: '爱尔兰'
          },
          {
            id: '98',
            name: 'Israel',
            name_zh: '以色列'
          },
          {
            id: '99',
            name: 'Italy',
            name_zh: '意大利'
          },
          {
            id: '100',
            name: 'Jamaica',
            name_zh: '牙买加'
          },
          {
            id: '101',
            name: 'Japan',
            name_zh: '日本'
          },
          {
            id: '102',
            name: 'Jordan',
            name_zh: '约旦'
          },
          {
            id: '103',
            name: 'Kazakhstan',
            name_zh: '哈萨克斯坦'
          },
          {
            id: '104',
            name: 'Kenya',
            name_zh: '肯尼亚'
          },
          {
            id: '105',
            name: 'Kiribati',
            name_zh: '基里巴斯'
          },
          {
            id: '106',
            name: "Korea, Democratic People's Republic of",
            name_zh: '朝鲜'
          },
          {
            id: '107',
            name: 'Korea, Republic of',
            name_zh: '韩国'
          },
          {
            id: '108',
            name: 'Kuwait',
            name_zh: '科威特'
          },
          {
            id: '109',
            name: 'Kyrgyzstan',
            name_zh: '吉尔吉斯斯坦'
          },
          {
            id: '110',
            name: "Lao People's Democratic Republic",
            name_zh: '老挝'
          },
          {
            id: '111',
            name: 'Latvia',
            name_zh: '拉脱维亚'
          },
          {
            id: '112',
            name: 'Lebanon',
            name_zh: '黎巴嫩'
          },
          {
            id: '113',
            name: 'Lesotho',
            name_zh: '莱索托'
          },
          {
            id: '114',
            name: 'Liberia',
            name_zh: '利比里亚'
          },
          {
            id: '115',
            name: 'Libya',
            name_zh: '利比亚'
          },
          {
            id: '116',
            name: 'Liechtenstein',
            name_zh: '列支敦士登'
          },
          {
            id: '117',
            name: 'Lithuania',
            name_zh: '立陶宛'
          },
          {
            id: '118',
            name: 'Luxembourg',
            name_zh: '卢森堡'
          },
          {
            id: '119',
            name: 'Macao',
            name_zh: '澳门'
          },
          {
            id: '120',
            name: 'Macedonia, the Former Yugoslav Republic of',
            name_zh: '马其顿'
          },
          {
            id: '121',
            name: 'Madagascar',
            name_zh: '马达加斯加'
          },
          {
            id: '122',
            name: 'Malawi',
            name_zh: '马拉'
          },
          {
            id: '123',
            name: 'Malaysia',
            name_zh: '马来西亚'
          },
          {
            id: '124',
            name: 'Maldives',
            name_zh: '马尔代夫'
          },
          {
            id: '125',
            name: 'Mali',
            name_zh: '马里'
          },
          {
            id: '126',
            name: 'Malta',
            name_zh: '马耳他'
          },
          {
            id: '127',
            name: 'Marshall Islands',
            name_zh: '马绍尔群岛'
          },
          {
            id: '128',
            name: 'Martinique',
            name_zh: '马提尼克'
          },
          {
            id: '129',
            name: 'Mauritania',
            name_zh: '毛里塔尼亚'
          },
          {
            id: '130',
            name: 'Mauritius',
            name_zh: '毛里求斯'
          },
          {
            id: '131',
            name: 'Mayotte',
            name_zh: '马约特'
          },
          {
            id: '132',
            name: 'Mexico',
            name_zh: '墨西哥'
          },
          {
            id: '133',
            name: 'Micronesia, Federated States of',
            name_zh: '密克罗尼西亚联邦'
          },
          {
            id: '134',
            name: 'Moldova, Republic of',
            name_zh: '摩尔多瓦'
          },
          {
            id: '135',
            name: 'Monaco',
            name_zh: '摩纳哥'
          },
          {
            id: '136',
            name: 'Mongolia',
            name_zh: '蒙古'
          },
          {
            id: '137',
            name: 'Montenegro',
            name_zh: '黑山'
          },
          {
            id: '138',
            name: 'Montserrat',
            name_zh: '蒙特塞拉特'
          },
          {
            id: '139',
            name: 'Morocco',
            name_zh: '摩洛哥'
          },
          {
            id: '140',
            name: 'Mozambique',
            name_zh: '莫桑比克'
          },
          {
            id: '141',
            name: 'Myanmar',
            name_zh: '缅甸'
          },
          {
            id: '142',
            name: 'Namibia',
            name_zh: '纳米比亚'
          },
          {
            id: '143',
            name: 'Nauru',
            name_zh: '瑙鲁'
          },
          {
            id: '144',
            name: 'Nepal',
            name_zh: '尼泊尔'
          },
          {
            id: '145',
            name: 'Netherlands',
            name_zh: '荷兰'
          },
          {
            id: '146',
            name: 'New Caledonia',
            name_zh: '新喀里多尼亚'
          },
          {
            id: '147',
            name: 'New Zealand',
            name_zh: '新西兰'
          },
          {
            id: '148',
            name: 'Nicaragua',
            name_zh: '尼加拉瓜'
          },
          {
            id: '149',
            name: 'Niger',
            name_zh: '尼日尔'
          },
          {
            id: '150',
            name: 'Nigeria',
            name_zh: '尼日利亚'
          },
          {
            id: '151',
            name: 'Niue',
            name_zh: '纽埃'
          },
          {
            id: '152',
            name: 'Norfolk Island',
            name_zh: '诺福克岛'
          },
          {
            id: '153',
            name: 'Northern Mariana Islands',
            name_zh: '北马里亚纳群岛'
          },
          {
            id: '154',
            name: 'Norway',
            name_zh: '挪威'
          },
          {
            id: '155',
            name: 'Oman',
            name_zh: '阿曼'
          },
          {
            id: '156',
            name: 'Pakistan',
            name_zh: '巴基斯坦'
          },
          {
            id: '157',
            name: 'Palau',
            name_zh: '帕劳'
          },
          {
            id: '158',
            name: 'Palestine, State of',
            name_zh: '巴勒斯坦'
          },
          {
            id: '159',
            name: 'Panama',
            name_zh: '巴拿马'
          },
          {
            id: '160',
            name: 'Papua New Guinea',
            name_zh: '巴布亚新几内亚'
          },
          {
            id: '161',
            name: 'Paraguay',
            name_zh: '巴拉圭'
          },
          {
            id: '162',
            name: 'Peru',
            name_zh: '秘鲁'
          },
          {
            id: '163',
            name: 'Philippines',
            name_zh: '菲律宾'
          },
          {
            id: '164',
            name: 'Pitcairn',
            name_zh: '皮特凯恩群岛'
          },
          {
            id: '165',
            name: 'Poland',
            name_zh: '波兰'
          },
          {
            id: '166',
            name: 'Portugal',
            name_zh: '葡萄牙'
          },
          {
            id: '167',
            name: 'Puerto Rico',
            name_zh: '波多黎各'
          },
          {
            id: '168',
            name: 'Qatar',
            name_zh: '卡塔尔'
          },
          {
            id: '169',
            name: 'Réunion',
            name_zh: '留尼汪'
          },
          {
            id: '170',
            name: 'Romania',
            name_zh: '罗马尼亚'
          },
          {
            id: '171',
            name: 'Russian Federation',
            name_zh: '俄罗斯联邦'
          },
          {
            id: '172',
            name: 'Rwanda',
            name_zh: '卢旺达'
          },
          {
            id: '173',
            name: 'Saint Barthélemy',
            name_zh: '圣巴泰勒米'
          },
          {
            id: '174',
            name: 'Saint Helena, Ascension and Tristan da Cunha',
            name_zh: '圣赫勒拿、阿森松岛和特里斯坦达库尼亚群岛'
          },
          {
            id: '175',
            name: 'Saint Kitts and Nevis',
            name_zh: '圣基茨和尼维斯'
          },
          {
            id: '176',
            name: 'Saint Lucia',
            name_zh: '圣卢西亚'
          },
          {
            id: '177',
            name: 'Saint Martin (French part)',
            name_zh: '法属圣马丁'
          },
          {
            id: '178',
            name: 'Saint Pierre and Miquelon',
            name_zh: '圣皮埃尔和密克隆'
          },
          {
            id: '179',
            name: 'Saint Vincent and the Grenadines',
            name_zh: '圣文森特和格林纳丁斯'
          },
          {
            id: '180',
            name: 'Samoa',
            name_zh: '萨摩亚'
          },
          {
            id: '181',
            name: 'San Marino',
            name_zh: '圣马力诺'
          },
          {
            id: '182',
            name: 'Sao Tome and Principe',
            name_zh: '圣多美和普林西比'
          },
          {
            id: '183',
            name: 'Saudi Arabia',
            name_zh: '沙特阿拉伯'
          },
          {
            id: '184',
            name: 'Senegal',
            name_zh: '塞内加尔'
          },
          {
            id: '185',
            name: 'Serbia',
            name_zh: '塞尔维亚'
          },
          {
            id: '186',
            name: 'Seychelles',
            name_zh: '塞舌尔'
          },
          {
            id: '187',
            name: 'Sierra Leone',
            name_zh: '塞拉利昂'
          },
          {
            id: '188',
            name: 'Sint Maarten (Dutch part)',
            name_zh: '荷属圣马丁'
          },
          {
            id: '189',
            name: 'Slovakia',
            name_zh: '斯洛伐克'
          },
          {
            id: '190',
            name: 'Slovenia',
            name_zh: '斯洛文尼亚'
          },
          {
            id: '191',
            name: 'Solomon Islands',
            name_zh: '所罗门群岛'
          },
          {
            id: '192',
            name: 'Somalia',
            name_zh: '索马里'
          },
          {
            id: '193',
            name: 'South Africa',
            name_zh: '南非'
          },
          {
            id: '194',
            name: 'South Georgia and the South Sandwich Islands',
            name_zh: '南乔治亚和南桑威奇群岛'
          },
          {
            id: '195',
            name: 'South Sudan',
            name_zh: '南苏丹'
          },
          {
            id: '196',
            name: 'Spain',
            name_zh: '西班牙'
          },
          {
            id: '197',
            name: 'Sri Lanka',
            name_zh: '斯里兰卡'
          },
          {
            id: '198',
            name: 'Sudan',
            name_zh: '苏丹'
          },
          {
            id: '199',
            name: 'Suriname',
            name_zh: '苏里南'
          },
          {
            id: '200',
            name: 'Svalbard and Jan Mayen',
            name_zh: '斯瓦尔巴和扬马延'
          },
          {
            id: '201',
            name: 'Swaziland',
            name_zh: '斯威士兰'
          },
          {
            id: '202',
            name: 'Sweden',
            name_zh: '瑞典'
          },
          {
            id: '203',
            name: 'Switzerland',
            name_zh: '瑞士'
          },
          {
            id: '204',
            name: 'Syrian Arab Republic',
            name_zh: '叙利亚'
          },
          {
            id: '205',
            name: 'Taiwan, Province of China',
            name_zh: '台湾'
          },
          {
            id: '206',
            name: 'Tajikistan',
            name_zh: '塔吉克斯坦'
          },
          {
            id: '207',
            name: 'Tanzania, United Republic of',
            name_zh: '坦桑尼亚'
          },
          {
            id: '208',
            name: 'Thailand',
            name_zh: '泰国'
          },
          {
            id: '209',
            name: 'Timor-Leste',
            name_zh: '东帝汶'
          },
          {
            id: '210',
            name: 'Togo',
            name_zh: '多哥'
          },
          {
            id: '211',
            name: 'Tokelau',
            name_zh: '托克劳'
          },
          {
            id: '212',
            name: 'Tonga',
            name_zh: '汤加'
          },
          {
            id: '213',
            name: 'Trinidad and Tobago',
            name_zh: '特立尼达和多巴哥'
          },
          {
            id: '214',
            name: 'Tunisia',
            name_zh: '突尼斯'
          },
          {
            id: '215',
            name: 'Turkey',
            name_zh: '土耳其'
          },
          {
            id: '216',
            name: 'Turkmenistan',
            name_zh: '土库曼斯坦'
          },
          {
            id: '217',
            name: 'Turks and Caicos Islands',
            name_zh: '特克斯和凯科斯群岛'
          },
          {
            id: '218',
            name: 'Tuvalu',
            name_zh: '图瓦卢'
          },
          {
            id: '219',
            name: 'Uganda',
            name_zh: '乌干达'
          },
          {
            id: '220',
            name: 'Ukraine',
            name_zh: '乌克兰'
          },
          {
            id: '221',
            name: 'United Arab Emirates',
            name_zh: '阿拉伯联合酋长国'
          },
          {
            id: '222',
            name: 'United Kingdom',
            name_zh: '英国'
          },
          {
            id: '223',
            name: 'United States',
            name_zh: '美国'
          },
          {
            id: '224',
            name: 'United States Minor Outlying Islands',
            name_zh: '美国本土外小岛屿'
          },
          {
            id: '225',
            name: 'Uruguay',
            name_zh: '乌拉圭'
          },
          {
            id: '226',
            name: 'Uzbekistan',
            name_zh: '乌兹别克斯坦'
          },
          {
            id: '227',
            name: 'Vanuatu',
            name_zh: '瓦努阿图'
          },
          {
            id: '228',
            name: 'Venezuela, Bolivarian Republic of',
            name_zh: '委内瑞拉'
          },
          {
            id: '229',
            name: 'Viet Nam',
            name_zh: '越南'
          },
          {
            id: '230',
            name: 'Virgin Islands, British',
            name_zh: '英属维尔京群岛'
          },
          {
            id: '231',
            name: 'Virgin Islands, U.S.',
            name_zh: '美属维尔京群岛'
          },
          {
            id: '232',
            name: 'Wallis and Futuna',
            name_zh: '瓦利斯和富图纳'
          },
          {
            id: '233',
            name: 'Western Sahara',
            name_zh: '西撒哈拉'
          },
          {
            id: '234',
            name: 'Yemen',
            name_zh: '也门'
          },
          {
            id: '235',
            name: 'Zambia',
            name_zh: '赞比亚'
          },
          {
            id: '236',
            name: 'Zimbabwe',
            name_zh: '津巴布韦'
          }
        ],

        formData: {
          procureditem: []
        },
        module: "customeraddre",
        newTitle: "New address",
        editTitle: "Edit address",
        group: [],
        xiabiao: -1,

      };
    },
    async created() {
      const adddata = await addrelist(1, 100, {
        customer_id: this.cid
      });
      if (adddata.data.length > 0) {
        console.log("dddddddddddddddddddd")
        console.log(adddata)
        this.formData.procureditem = adddata.data;
      } else {
        console.log("eeeeeeeeeeeeeeee")
        this.addItem();
      }
    },
    methods: {
      addItem() { //增加行
        this.xiabiao += 1
        this.formData.procureditem.push({
          id: null,
          index: this.xiabiao,
          title: "",
          attention: "",
          tel: "",
          address: "",
          fax: "",
          customer_id: this.cid,
          countries: "Singapore"
        });
      },
      async removeItem(row) {
        const index = this.formData.procureditem.indexOf(row)
        if (this.formData.procureditem.length > 1) {
          this.formData.procureditem.splice(index, 1);
          if (row.id > 0) {
            await destroy(row.id);
          }
        } else {
          this.$message.error("Keep at least one row of data!")
        }
      },
      async save(form) {
        console.log(this.formData)
        this.$refs[form].validate(async (valid) => {
          if (valid) {
            for (var i = 0; i < this.formData.procureditem.length; i++) {

              var tm = this.formData.procureditem[i].title
              var tattention = this.formData.procureditem[i].attention
              var ttel = this.formData.procureditem[i].tel
              var tfax = this.formData.procureditem[i].fax
              var taddress = this.formData.procureditem[i].address

              if (tm === null || tm.trim().length === 0) {
                this.$message.error("please input title");
                return false
              }
              if (tattention === null || tattention.trim().length === 0) {
                this.$message.error("please input attention");
                return false
              }
              if (ttel === null || ttel.trim().length === 0) {
                this.$message.error("please input tel");
                return false
              }
              if (tfax === null || tfax.trim().length === 0) {
                this.$message.error("please input fax");
                return false
              }
              if (taddress === null || taddress.trim().length === 0) {
                this.$message.error("please input address");
                return false
              }
            }

            try {
              let {
                info
              } = await addrestore(this.formData);
              this.$message.success("Save successfully");
              this.fetchData();
              this.isEdit = false;
              this.isNew = false;
            } catch (error) {
              let result = error.response.data;
              this.$message.error(result.info);
            }
          } else {
            this.$message.error("Data verification error, please input according to the specified rules");
            return false;
          }
        });
      }
    }
  }
</script>
<style>
  .customWidth {
    width: 80%;
  }

  .addlist {
    border-bottom: 1px solid #ececec;
    display: flex;
    justify-content: space-between;
    width: 460px;
    position: relative;
    height: 40px;
    left: -85px;
  }
</style>
<style>
  .warpper {
    padding: 30px 20px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
  }

  .table,
  .toolbar,
  .page {
    margin: 20px;
  }

  .toolbar {
    margin-top: 10px;
    padding: 5px;
  }

  .table {
    margin-bottom: 10px;
  }

  .page {
    margin-top: 10px;
    text-align: center;
  }

  .green-text {
    color: green;
  }

  .red-text {
    color: red;
  }

  .yellow-text {
    color: yellow;
  }

  .el-form-item {
    margin-bottom: 22px !important;
  }
</style>